<template>
    <div class="DictDrawer">
        <a-drawer
                :title="title"
                placement="right"
                width="70%"
                :closable="false"
                :visible="visible"
                @close="onClose"
        >

            <a-form style="max-width: 100%; margin: 40px auto 0;">
                <a-row class="form-row">
                    <a-col :lg="12" :md="12" :sm="24">
                        <a-form-item
                                label="数据字典名"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 17}"
                                :validate-status="validate.name.pass? '':'error'"
                                :help="validate.name.pass? '':validate.name.help"
                        >
                            <a-input  v-model="dict.name" placeholder="首字母大写驼峰命名"/>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="12" :md="12" :sm="24">
                        <a-form-item
                                label="数据字典名(中文)"
                                :labelCol="{span: 7}"
                                :wrapperCol="{span: 17}"
                                :validate-status="validate.chName.pass? '':'error'"
                                :help="validate.chName.pass? '':validate.chName.help"
                        >
                            <a-input v-model="dict.chName" />
                        </a-form-item>
                    </a-col>
                </a-row>

                <div class="title">
                    数组字典项列表
                </div>

                <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
                <a-table
                        v-if="dict.dictItems.length > 0"
                        :columns="columns"
                        :data-source="dict.dictItems"
                        :pagination="false"
                        :row-key="(r,i) => i"
                        :customRow="(r,i) => customClick(r,i)"
                >
                    <div slot="id" slot-scope="text,record,index">{{index+1}}</div>
                    <div slot="key" slot-scope="text,record">
                        <a-input v-model="record.key"/>
                    </div>
                    <div slot="value" slot-scope="text,record">
                        <a-input v-model="record.value"/>
                    </div>
                </a-table>
                <a-button style="width: 100%; margin-top: 8px; margin-bottom: 8px;height: 65px" type="dashed" icon="plus" @click="addProp">添加字段</a-button>
                <a-form-item style="text-align: center">
                    <a-button style="margin-left: 8px;margin-right: 50px" @click="onCancel">取消</a-button>
                    <a-button type="primary" @click="onSubmit">确定</a-button>
                </a-form-item>
            </a-form>
        </a-drawer>

    </div>
</template>

<script>
    import Contextmenu from '@/components/menu/Contextmenu'
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 30,
            key: 'id',
            scopedSlots: { customRender: 'id' },
        },
        {
            title: '关键字',
            dataIndex: 'key',
            width: 30,
            key: 'key',
            scopedSlots: { customRender: 'key' },
        },
        {
            title: '值',
            dataIndex: 'value',
            width: 30,
            key: 'value',
            scopedSlots: { customRender: 'value' },
        },
    ];
    const menuItemList = [
        { key: '1', icon: 'delete', text: '删除' },
        { key: '2', icon: 'up', text: '上移' },
        { key: '3', icon: 'down', text: '下移' },
    ];

    export default {
        name: 'AddDictDrawer',
        props: {
            title: String,
            width: String,
            isAdd: {
                type: [Object, Boolean],
                default: true
            },
            visible: {
                type: [Object, Boolean],
                default: false
            },
            dictVO: Object,
        },
        components:{Contextmenu,},
        data () {
            return {
                columns,
                menuItemList,
                menuVisible:false,
                dict:{
                    name:'',
                    chName:'',
                    dictItems: []
                },
                validate:{
                    name: {
                        pass: true,
                    },
                    chName: {
                        pass: true,
                    },
                },

                customClick: (record,index) => ({
                    on: {
                        contextmenu: e => {
                            e.preventDefault();
                            e.meta = {record,index};
                            this.menuVisible = true;
                            document.body.addEventListener("click", this.bodyClick);
                        }
                    }
                })
            }
        },
        methods: {
            onClear() {
                this.$emit('clear')
            },
            onClose() {
                this.$emit('close');
            },
            onMenuSelect(key,target,meta){
                switch (key) {
                    case '1': this.deleteRow(meta.index); break
                    case '2': this.moveUp(meta.index); break
                    case '3': this.moveDown(meta.index); break
                    default: break
                }
            },
            bodyClick(){
                this.menuVisible = false;
                document.body.removeEventListener("click", this.bodyClick);
            },
            deleteRow(index) {
                this.dict.dictItems.splice(index,1);
            },
            moveUp(index){
                if (index < 1) {
                    return;
                }
                const obj = this.dict.dictItems[index - 1];
                this.dict.dictItems[index - 1] = this.dict.dictItems[index];
                this.dict.dictItems[index] = obj;

            },
            moveDown(index){
                if (index == this.dict.dictItems.length - 1) {
                    return;
                }
                const obj = this.dict.dictItems[index + 1];
                this.dict.dictItems[index + 1] = this.dict.dictItems[index];
                this.dict.dictItems[index] = obj;
            },
            addProp() {
                this.dict.dictItems.push({
                    key:'',
                    value:''
                })
            },
            onCancel() {
                this.onClose();
            },
            verify() {
                let flag = true;
                if (this.dict.name == undefined || this.dict.name == '') {
                    this.validate.name.pass = false;
                    this.validate.name.help = '字典名不为空';
                    flag = false;
                } else {
                    this.validate.name.pass = true;
                }

                if (this.dict.chName == undefined || this.dict.chName == '') {
                    this.validate.chName.pass = false;
                    this.validate.chName.help = '字典名(中文)不为空';
                    flag = false;
                }else {
                    this.validate.chName.pass = true;
                }
                return flag;
            },
            onSubmit() {
                if (!this.verify()) {
                    return;
                }

                this.dict.dictItems = this.dict.dictItems.filter((item)=>{
                    if (item.key == undefined || item.key == '') {
                        return false;
                    }
                    if (item.value == undefined||item.value == '') {
                        return false;
                    }
                    return true;
                });
                if (this.isAdd) {
                    this.$emit('changeAdd',this.dict);
                } else {
                    this.$emit('changeUpdate',this.dict);
                }
                this.onClose();
            }
        },
        watch: {
            visible:function(val) {
                if (val && this.isAdd) {
                    this.dict = {
                        name:'',
                        chName:'',
                        dictItems: []
                    }
                    this.validate = {
                        name: {
                            pass: true,
                        },
                        chName: {
                            pass: true,
                        },
                    }
                }
                if (val && !this.isAdd) {
                    this.dict = this.dictVO;
                }
            }
        },
        computed: {

        }
    }
</script>

<style scoped lang="less">
    .input-number{
        width: 47%;
    }
    .title{
        font-size: 150%;
        font-weight: bold;
    }
</style>
